<template>
  <div class="app-container">
    <!-- <t-Search /> -->
    <el-form :model="param" :inline="true" label-width="68px">
      <el-form-item style="width:320px">
        <div>箱号</div>
        <MultipleBoxNumbersDialog v-model="param.containerNo" />
      </el-form-item>
      <el-form-item style="width:240px">
        <div>箱型</div>
        <el-select v-model="param.boxType" style="width:100%" placeholder="选择箱型">
          <el-option v-for="item in param.boxTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item style="width:240px">
        <div>箱况</div>
        <el-select v-model="param.boxCondition" style="width:100%" placeholder="选择箱况">
          <el-option v-for="item in param.boxCaseOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item style="width:240px">
        <div>状态</div>
        <el-select v-model="param.status" style="width:100%" placeholder="选择箱型">
          <el-option v-for="item in param.statusOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item style="width:240px">
        <div>提箱日期</div>
        <el-date-picker v-model="param.inDate" type="daterange" range-separator="~" start-placeholder="开始日期"
          end-placeholder="结束日期" />
      </el-form-item>
      <el-form-item style="width:240px">
        <div>还箱日期</div>
        <el-date-picker v-model="param.outDate" type="daterange" range-separator="~" start-placeholder="开始日期"
          end-placeholder="结束日期" />
      </el-form-item>
      <el-form-item style="width:240px">
        <div>集装箱公司</div>
        <el-input v-model="param.companyName" style="width:100%" placeholder="输入集装箱公司名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleReSet" :icon="Refresh" style="margin-top: 30px">重置</el-button>
        <el-button @click="getTableData" :icon="Search" type="primary" style="margin-top: 30px">查询</el-button>
        <!-- // 获取列表数据 -->
      </el-form-item>
    </el-form>



    <Table ref="tableRef" v-bind="table" style="width: 100%;" @pageChange="onTablePageChange" @showInfo="showInfo"
      @handleBuyBox="handleBuyBox">
    </Table>

    <!--dialog -->
    <!-- info -->
    <el-dialog v-model="param.dialogInfoVisible" style="width: 800px;box-sizing: border-box;padding:40px">
      <box-info :boxInfo="param.boxInfo" :infoType="'boxHuiDiao'"></box-info>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import Table from '@/components/table'
import citySelect from '@/components/citySelect'
import yardSelect from '@/components/citySelect/yardSelect'
import boxInfo from '@/views/components/boxInfo.vue'
import { getInterValDays } from '@/utils'
import { ElMessage } from 'element-plus'
import { computed, onMounted, reactive, ref } from 'vue';
// import { getAgentSelfTable } from '@/api/boxCallBack'
import { getMyCallbackBoxTable, getMyCallbackBoxInfo, buyBox } from '@/api/boxCallBack/mine'
import {
  Plus,
  Delete,
  Edit,
  Message,
  Search,
  Download,
  Upload,
  Refresh,
  UploadFilled
} from '@element-plus/icons-vue'
import MultipleBoxNumbersDialog from '@/components/dialog/multipleBoxNumbersDialog.vue'
import {formatContainerNo} from '@/utils/mlpBox' // 格式化箱号
const param = reactive({
  value1: [],
  boxInfo: { code: '123456789', type: "40HQ", info: "无" },
  pageNum: 1,
  pageSize: 10,
  dialogTableVisible: false,
  dialogInfoVisible: false,
  dialogEditVisible: false,
  dialogVisible: false,
  dialogPathVisible: false,
  options: [{
    value: 'Option1',
    label: '40HQ',
  },
  {
    value: 'Option2',
    label: '40GP',
  }],

  statusOptions: [
    { value: null, label: '全部', },
    { value: '5', label: '已提', },
    { value: '10', label: '未还', },
    { value: '15', label: '还箱中', },
    { value: '20', label: '已还', },
    { value: '25', label: '已买', },
  ],
  boxTypeOptions: [ // 5 - 40HQ   10 - 40GP  15 - 20HQ   20 - 20GP
    { value: '5', label: '40HQ', },
    { value: '10', label: '40GP', },
    { value: '15', label: '20HQ', },
    { value: '20', label: '20GP', },
  ],
  boxCaseOptions: [ //5-全新   10-次新  15-适货 20-混提(次新或者适货)
    { value: '15', label: '适货', },
    { value: '10', label: '次新', },
   // { value: '20', label: '混提(次新或者适货)', },
    { value: '5', label: '全新', },
  ],
  inDate: [],
  outDate: [],
  companyName:""

});

const table = reactive({
  // 列表数据（必传）
  data: [],
  // 表头内容（必传，注意格式）
  header: [
    { key: 'containerNo', key2: 'oidContainerNo', colWidth: '150', title: '箱号', type: '<a>', command: 'showInfo', isCheck: true },
    { key: 'boxType', colWidth: '120', title: '箱型', type: 'filter', filter: { 5: '40HQ', 10: '40GP', 15: '20HQ', 20: '20GP' }, isCheck: true },
    { key: 'boxCondition', colWidth: '120', title: '箱况', type: 'filter', filter: { 5: '全新', 10: '次新', 15: '适货' }, isCheck: true },
    { key: 'location', colWidth: '120', title: '实时位置', type: 'text', isCheck: true },
    { key: 'packingDate', colWidth: '120', title: '提箱日期', type: 'date', sortable: true, isCheck: true },
    { key: 'boxUsagePeriod', colWidth: '80', title: '箱使期', type: 'add', after:"天", isCheck: true },
    { key: 'useDays', colWidth: '120', title: '已用天数', type: 'add',after:"天", isCheck: true },
    { key: 'returnDate', colWidth: '120', title: '还箱日期', type: 'date', sortable: true, isCheck: true },
    { key: 'overdueDays', colWidth: '120', title: '超期天数', type: 'text', sortable: true, isCheck: true },
    {
      key: 'status', colWidth: '100', title: '状态', type: 'filter',
      filter: { 5: '已提', 10: '未还', 15: '还箱中', 20: '已还', 25: '已买' }, // 5-已提  10-未还  15-还箱中  20-已还 25-已买
      cFilter: { 5: '#22A86D', 10: '#2158F3', 15: '#909399', 20: '#909399', 25: '#22A86D' }, isCheck: true
    },
    // {
    //   key: 'payStatus', colWidth: '100', title: '支付状态', type: 'filter',
    //   filter: { 5: '未付', 10: '支付中', 15: '已付' }, // 5-未付 10-支付中 15-已付
    //   isCheck: true
    // },
    { key: 'agentName', colWidth: '200', title: '集装箱公司', type: 'text', isCheck: true },
    {
      key: 'operate',
      colWidth: '200',
      title: '操作',
      type: 'operate',
      isCheck: true,
      fixed: 'right',
      buttons: [
        {
          icon: 'Message',
          command: 'handleBuyBox',
          content: '购买',
          isShow: (row: { status: string; }) => {
            return row.containerStatus == '30';
          },
        },
      ],
    },
  ],
  // table配置项（必传）
  config: {
    isSelection: true,
    isList: false,
    isPagination: true, // 是否分页
    total: 0, // 分页总数
    loading: false
  },
});

// 获取列表数据
function getTableData() {
  const { container, containerList } = formatContainerNo(param.containerNo);
  let data = {
    containerNo: container, // 单箱号查询
    containerNos: containerList, // 多箱号查询
    boxType: param.boxType,
    boxCondition: param.boxCondition,
    pageNum: param.pageNum,
    pageSize: param.pageSize,
    companyName: param.companyName.trim()
  };
  if (param.status) {
    data.statusList = [param.status - 0]
  }
  if (param.inDate && param.inDate.length > 1) {
    data.beginPackingDate = param.inDate[0]
    data.endPackingDate = param.inDate[1]
  }
  if (param.outDate && param.outDate.length > 1) {
    data.beginReturnDate = param.outDate[0]
    data.endReturnDate = param.outDate[1]
  }
  table.config.loading = true;
  getMyCallbackBoxTable(data).then(res => {
    table.data = res.data.list;
    table.config.total = res.data.total;
  });
  table.config.loading = false;
}
//重置
function handleReSet() {
  param.containerNo = null
  param.status = null
  param.inDate = null
  param.outDate = null
  param.boxType = null
  param.boxCondition = null
  param.companyName = ""
  getTableData()
}

//详情
const showInfo = (row: any) => {
  getMyCallbackBoxInfo(row.id).then(res => {
    param.boxInfo = res.data
  })
  param.dialogInfoVisible = true;
};
//buy
const handleBuyBox = (row: any) => {
  buyBox(row.id)
};

//分页
function onTablePageChange(page: any) {
  param.pageNum = page.pageNum;
  param.pageSize = page.pageSize;
  console.log(param)
  getTableData();
};

//
onMounted(() => {
  getTableData();
})

</script>

<style scoped>
.el-form-diy {
  padding: 10px;

  div {
    width: 100%;
  }
}
</style>
